<script setup lang="ts">
import { IndexProps } from "@/views/home/components/types.ts";
import JsonEditorVue from "json-editor-vue";
import { useDark } from "@pureadmin/utils";
import { invoke } from "@tauri-apps/api/tauri";

defineOptions({
	name: "HomeStatisticsView",
});
const props = withDefaults(defineProps<IndexProps>(), {
	index: () => "",
});
const { isDark } = useDark();
const index = toRef(props, "index");

const jsonContent = ref<any>({});
const hasJsonFlag = ref(true);
const jsonChange = (value: any) => {
	console.log(value);
	// 实时保存
	jsonSave(value);
};
// 保存
const jsonSave = (value: any) => {
	jsonContent.value = value;
	hasJsonFlag.value = true;
};
// 出错
const hasError = () => {
	console.log("出现错误");
	hasJsonFlag.value = false;
};
const checkJson = () => {
	if (hasJsonFlag.value === false) {
		console.log("json校验失败");
		return false;
	} else {
		console.log("json校验成功");
		return true;
	}
};

watch(index, () => {
	getIndicesStats();
});

function getIndicesStats() {
	invoke("get_indices_stats", { index: index.value }).then((res: any) => {
		if (res._all) {
			jsonContent.value["_shards"] = res._shards;
			jsonContent.value["_all"] = res._all;
		} else {
			jsonContent.value = res;
		}
	});
}

onMounted(function () {
	getIndicesStats();
});
</script>

<template>
	<div class="home-statistics-view">
		<div class="home-setting-view">
			<json-editor-vue
				:class="{ 'jse-theme-dark': isDark }"
				v-model="jsonContent"
				mode="text"
				:readOnly="true"
				:navigationBar="false"
				:statusBar="false"
				:mainMenuBar="false"
				@has-error="hasError"
				@json-change="jsonChange"
				@json-save="jsonSave"
			/>
		</div>
	</div>
</template>

<style scoped lang="scss">
.home-statistics-view {
	width: 100%;
	word-wrap: break-word;
	word-break: normal;
}
</style>
